input[su][type="date"] {
    -webkit-appearance: none;
}

label[su-date]>div {
    display: none;
    width: calc(7 * var(--x2));
    position: absolute;
    border: 1px solid var(--Gray);
    background: var(--White);
    z-index: 1;
    box-sizing: content-box;
    padding: var(--pw);
    border-radius: var(--rad);
    background-position-x: var(--pw);
    background-repeat: no-repeat;
    background-image: url();
    margin-top: -1px;
}

label[su-date] input[su][type="date"]:hover+div,
label[su-date]>div:hover,
label[su-date]:hover>div {
    display: block;
}

label[su-date]>div input[type="number"] {
    width: var(--x3);
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
    display: block;
    clear: none;
    float: left;
    border: 0;
    margin-bottom: var(--x2);
    text-align: right;
    cursor: pointer;
}

label[su-date]>div input[type="number"]:first-of-type {
    margin-left: var(--x2);
    width: var(--x5);
    margin-right: var(--x2);
}

label[su-date]>div input[type="radio"] {
    -webkit-appearance: none;
    display: block;
    float: left;
    width: var(--x2);
    height: var(--x2);
    padding: 0;
    margin: 2px 0;
    cursor: pointer;
    border-radius: var(--rad);
}

label[su-date]>div input[type="radio"]:hover {
    filter: brightness(0.8);
}

label[su-date]>div input[type="radio"] {
    background-image: url();
}

label[su-date]>div input[type="radio"][value="01"] {
    background-position-x: 0;
    clear: left;
}

label[su-date]>div input[type="radio"][value="02"] {
    background-position-x: calc(-1 * var(--x2))
}

label[su-date]>div input[type="radio"][value="03"] {
    background-position-x: calc(-2 * var(--x2))
}

label[su-date]>div input[type="radio"][value="04"] {
    background-position-x: calc(-3 * var(--x2))
}

label[su-date]>div input[type="radio"][value="05"] {
    background-position-x: calc(-4 * var(--x2))
}

label[su-date]>div input[type="radio"][value="06"] {
    background-position-x: calc(-5 * var(--x2))
}

label[su-date]>div input[type="radio"][value="07"] {
    background-position-x: calc(-6 * var(--x2))
}

label[su-date]>div input[type="radio"][value="08"] {
    background-position-x: calc(-7 * var(--x2))
}

label[su-date]>div input[type="radio"][value="09"] {
    background-position-x: calc(-8 * var(--x2))
}

label[su-date]>div input[type="radio"][value="10"] {
    background-position-x: calc(-9 * var(--x2))
}

label[su-date]>div input[type="radio"][value="11"] {
    background-position-x: calc(-10 * var(--x2))
}

label[su-date]>div input[type="radio"][value="12"] {
    background-position-x: calc(-11 * var(--x2))
}

label[su-date]>div input[type="radio"][value="13"] {
    background-position-x: calc(-12 * var(--x2))
}

label[su-date]>div input[type="radio"][value="14"] {
    background-position-x: calc(-13 * var(--x2))
}

label[su-date]>div input[type="radio"][value="15"] {
    background-position-x: calc(-14 * var(--x2))
}

label[su-date]>div input[type="radio"][value="16"] {
    background-position-x: calc(-15 * var(--x2))
}

label[su-date]>div input[type="radio"][value="17"] {
    background-position-x: calc(-16 * var(--x2))
}

label[su-date]>div input[type="radio"][value="18"] {
    background-position-x: calc(-17 * var(--x2))
}

label[su-date]>div input[type="radio"][value="19"] {
    background-position-x: calc(-18 * var(--x2))
}

label[su-date]>div input[type="radio"][value="20"] {
    background-position-x: calc(-19 * var(--x2))
}

label[su-date]>div input[type="radio"][value="21"] {
    background-position-x: calc(-20 * var(--x2))
}

label[su-date]>div input[type="radio"][value="22"] {
    background-position-x: calc(-21 * var(--x2))
}

label[su-date]>div input[type="radio"][value="23"] {
    background-position-x: calc(-22 * var(--x2))
}

label[su-date]>div input[type="radio"][value="24"] {
    background-position-x: calc(-23 * var(--x2))
}

label[su-date]>div input[type="radio"][value="25"] {
    background-position-x: calc(-24 * var(--x2))
}

label[su-date]>div input[type="radio"][value="26"] {
    background-position-x: calc(-25 * var(--x2))
}

label[su-date]>div input[type="radio"][value="27"] {
    background-position-x: calc(-26 * var(--x2))
}

label[su-date]>div input[type="radio"][value="28"] {
    background-position-x: calc(-27 * var(--x2))
}

label[su-date]>div input[type="radio"][value="29"] {
    background-position-x: calc(-28 * var(--x2))
}

label[su-date]>div input[type="radio"][value="30"] {
    background-position-x: calc(-29 * var(--x2))
}

label[su-date]>div input[type="radio"][value="31"] {
    background-position-x: calc(-30 * var(--x2))
}

label[su-date]>div input[type="radio"]:checked {
    background-position-y: calc(-31 * var(--x2))
}

label[su-date] input[type="number"][value="2"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="4"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="6"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="9"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="11"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="30"],
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="29"] {
    display: none
}

label[su-date] input[name="ymd"][data-leap="true"]+div input[type="radio"][value="29"] {
    display: block
}

label[su-date] input[name="ymd"][data-day="1"]+div input[type="radio"][value="01"] {
    margin-left: calc(0 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="2"]+div input[type="radio"][value="01"] {
    margin-left: calc(1 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="3"]+div input[type="radio"][value="01"] {
    margin-left: calc(2 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="4"]+div input[type="radio"][value="01"] {
    margin-left: calc(3 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="5"]+div input[type="radio"][value="01"] {
    margin-left: calc(4 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="6"]+div input[type="radio"][value="01"] {
    margin-left: calc(5 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="0"]+div input[type="radio"][value="01"] {
    margin-left: calc(6 * var(--x2))
}